$fb-color: #3D62B3
$fb-color-dark: #335795
$tw-color: #03ABEA
$tw-color-dark: #029ad3

@mixin btn-color($name, $bg-color, $border-bottom-color)
  &.btn-#{$name}
    border-color: $bg-color
    border-bottom-color: $border-bottom-color
    background-color: $bg-color
    box-shadow: 0 2px 3px rgba($bg-color, .3)
    &:hover
      box-shadow: 0 4px 6px rgba($bg-color, .15)

@mixin social-color($name, $bg-color, $border-bottom-color)
  &.__#{$name}
    border-color: $bg-color
    border-bottom-color: $border-bottom-color
    background-color: $bg-color

.btn
  padding: 10px 30px
  border-radius: 0
  border-width: 1px
  border-style: solid
  border-color: transparent
  border-radius: 3px
  box-shadow: 0 2px 3px rgba($grey, .3)
  margin-bottom: 5px
  transition: all .3s ease

  &:hover
    transform: translate(0, -2px)
    box-shadow: 0 4px 6px rgba($grey, .15)


  &.btn-xs
    padding: 5px 10px
    border-bottom-width: 2px

  &.btn-sm
    padding: 10px 20px
    border-bottom-width: 2px

  &.btn-lg
    font-size: 1.5em

  &.btn-default
    border-color: $grey-lighter
    background-color: $white

  &.btn-link
    box-shadow: none
    background-color: transparent
    border-bottom-width: 0px

  @include btn-color("primary", $blue, $blue-darker)
  @include btn-color("success", $green, $green-darker)
  @include btn-color("warning", $orange, $orange-darker)
  @include btn-color("danger", $red, $red-darker)
  @include btn-color("info", $blue-sky, $blue-sky-darker)

  &.btn-social
    color: $white
    .info 
      @include flex($align: center)
    .icon
      font-size: 2em
      margin-right: 15px

    @include social-color("facebook", $fb-color, $fb-color-dark)
    @include social-color("twitter", $tw-color, $tw-color-dark)